<template>
	<view class="container">
		<live-pusher
			id="livePusher"
			mode="HD"
			:autopush="isPush"
			max-bitrate="1000"
			:url="pushUrl"
			video-width="1280"
			video-height="720"
			orientation="horizontal"
			:remote-mirror="isMirror"
			:local-mirror="`${isMirror?'enable':'disable'}`"
			device-position="front"
			:style="{ height: windowHeight, width: windowWidth }"
			@statechange="statechange"
			@error = "error"
			style="display: flex;flex-direction: column;">
			<cover-view class="cover-view" v-if="offLine">
				<cover-view>{{ offLineText }}</cover-view>
				<cover-view class="cover-inner resume" @tap="resume">刷新</cover-view>
			</cover-view>
			<!-- 正反摄像头切换 -->
			<cover-view class="device-pos-btn" @click="switchCamera" v-if="!isVote">
				<cover-image src="@/static/icon/roate.png" class="pos-img" :class="{'roate-half':isFront, 'roate-full':!isFront}"></cover-image>
			</cover-view>
			<!-- 镜像切换 -->
			<cover-view class="device-mirror-btn" :class="{'is-mirror':isMirror, 'un-mirror':!isMirror}" @click="isMirror = !isMirror">
				<cover-image src="@/static/icon/mirror.png" class="pos-img"></cover-image>
			</cover-view>
			<!-- 当前状态文本 -->
			<cover-view class="device-status-text">
				{{isPreview?'调试中...':''}}
			</cover-view>
			<!-- 开始 结束 -->
			<cover-view class="device-control-btn" @tap="isBegin = !isBegin">
				{{controlText(isBegin) || '开始直播'}}
			</cover-view>
		</live-pusher>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//页面id
			Id: '',
			//推流url
			pushUrl: '',
			//下线标记
			offLine: false,
			//自动推流标记
			isPush: false,
			//下线提示文字
			offLineText: '掉线了',
			//课程id
			classId: '',
			//摄像头前置、后置标记
			isFront: false,
			//是否发起投票
			isVote: false,
			//定时器
			timer: '',
			//投票剩余时间
			currentTime: 0,
			voteInfo: [],
			// 推流镜像
			isMirror: false,
			// 是否开始
			isBegin: false,
			// 是否预览
			isPreview: true
		};
	},
	watch:{
		isBegin(e){
			// 开始直播
			if(e){
				this.isPreview = false;
				this.isPush = true;
			}
			// 结束直播
			else{
				this.isPush = false;
				uni.navigateBack({
					url: '../index/index'
				})
			}
		}
	},
	onShow() {
		uni.setKeepScreenOn({keepScreenOn: true})
	},
	onHide() {
		uni.setKeepScreenOn({keepScreenOn: false})
		clearInterval(this.timer)
	},
	onLoad(e) {
		this.Id = e.Id;
		this.getLivePushInfo(e.Id)
		uni.setKeepScreenOn({keepScreenOn: true})
		this.context = uni.createLivePusherContext("livePusher", this);
	},
	onUnload() {
		uni.setKeepScreenOn({keepScreenOn: false})
		clearInterval(this.timer)
	},
	computed: {
		//直播画面高
		windowHeight: () => {
			return uni.getSystemInfoSync().windowHeight + 'px';
		},
		//直播画面宽
		windowWidth: () => {
			return uni.getSystemInfoSync().windowWidth + 'px';
		},
		// 开始结束直播按钮文字
		controlText: function(){
			return function(e){
				return e?'结束直播':'开始直播'
			}
		}
	},
	methods: {
		//发起投票
		beginVote(){
			this.isVote = true
			this.$http.request({
				url: 'api/LivePush/CreateVote',
				method: 'PUT',
				showLoading: false,
				data: {
					mainId: this.Id,
					voteType: 1
				}
			}).then(()=>{
				this.getVoteComment()
			})
		},
		//结束投票
		endVote(){
			clearInterval(this.timer)
			this.isVote = false
		},
		//定时获取结果
		getVoteComment(){
			this.currentTime = 1 * 60
			this.timer = setInterval(()=>{
				if(this.currentTime == 0){
					this.isVote = false
					clearInterval(this.timer)
				}
				this.getVoteData().then(resp=>{
					this.voteInfo = resp
					this.currentTime--
				})
			}, 1000)
		},
		//获取投票结果
		getVoteData(){
			return this.$http.request({
				url: 'api/LivePush/GetListWithVoter',
				method: 'GET',
				showLoading: false,
				data: {
					Id: this.Id
				}
			})
		},
		//切换摄像头
		switchCamera(){
			this.context.switchCamera({
				success: () => {
					this.isFront = !this.isFront
				}
			})
		},
		//请求推流数据
		getLivePushInfo(id) {
			return this.$http
			.request({
				url: 'api/LivePush/GetLivePushInfo',
				data: {
					Id: id
				}
			})
			.then(res => {
				this.pushUrl = res.livePushUrl;
				this.classId = res.channelClassId;
				uni.setNavigationBarTitle({
					title: res.courseName
				});
				this.context.startPreview({
					success: e=>{
						console.log(e)
					}
				});
			});
		},
		// 区分处理
		switchData(e){
			// 上下课
			if(e.messageType == 4){
				this.isBegin = !data.isOver;
				uni.showToast({
					title: '结束推流，已切换到预览状态',
					icon: 'none',
					duration: 3000
				})
			}
		},
		//直播状态变更
		statechange(e) {
			if(!this.pushUrl){
				return;
			}
			let code = e.detail.code;
			if (code == -1307 || code == -1310 || code > 3000) {
				this.offLine = true;
				this.isPush = false;
			}
		},
		//直播间刷新
		resume() {
			this.offLine = false;
			this.isPush = true;
		},
		//推流出错
		error(e){
			console.error(`渲染错误! code is ${e.detail.errorCode}: `, e.detail.errMsg);
		}
	}
};
</script>

<style lang="scss" scoped>
.cover-view {
	width: 100%;
	height: 100%;
	background: #2c405a;
	color: #f8f8f8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	.cover-inner {
		display: flex;
		align-items: center;
		padding: 5px 10px;
		margin-top: 10px;
		&.resume {
			display: inline-block;
			width: 80rpx;
			background: #4cd964;
			color: #f1f1f1;
			border-radius: 5px;
		}
	}
}

.device-mirror-btn{
	position: absolute;
	right: 10rpx;
	top: 10rpx;
	transition: transform .5s;
	.pos-img{
		width: 70rpx;
		height: 70rpx;
	}
	&.is-mirror{
		transform: scale(-1, 1);
	}
	&.un-mirror{
		transform: scale(1, 1);
	}
}

.device-status-text{
	width: 100%;
	font-size: 30rpx;
	padding: 20rpx 0;
	color: #fff;
	text-align: center;
}

.device-control-btn{
	position: absolute;
	left: 10rpx;
	top: 10rpx;
	font-size: 30rpx;
	color: #fff;
	border: 1rpx solid #fff;
	padding: 10rpx;
	border-radius: 10rpx;
	transition: opacity .3s;
}
.device-control-btn:active{
	opacity: .8;
}

.device-pos-btn{
	width: 50rpx;
	height: 50rpx;
	border: 2rpx solid #fff;
	border-radius: 50%;
	font-size: 20rpx;
	padding: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 43%;
	bottom: 30rpx;
	.pos-img{
		width: 50rpx;
		height: 50rpx;
	}
	.roate-half{
		animation: roate-half .8s;
	}
	.roate-full{
		animation: roate-full .8s;
	}
	@keyframes roate-half{
		from{transform: rotate(0);}
		to{transform: rotate(180deg);}
	}
	@keyframes roate-full{
		from{transform: rotate(180deg);}
		to{transform: rotate(360deg);}
	}
}
.vote-btn{
	position: absolute;
	top: 30rpx;
	right: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	.vote-img{
		width: 50rpx;
		height: 50rpx;
	}
}

@keyframes show-vote{
	from{transform: scale(0);}
	to{transform: scale(1);}
}
.vote-panel{
	width: 80vw;
	height: 60vw;
	background-color: #fff;
	border-radius: 20rpx;
	position: absolute;
	top: 20%;
	left: 10%;
	animation: show-vote .5s;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 0 10rpx;
	.close-btn{
		position: absolute;
		top: 15rpx;
		right: 15rpx;
		width: 30rpx;
		height: 30rpx;
		.close-line1{
			width: 5rpx;
			height: 30rpx;
			background-color: #5a5a5a;
			position: absolute;
			top: 0;
			left: 48%;
			transform: rotate(45deg);
		}
		.close-line2{
			width: 5rpx;
			height: 30rpx;
			background-color: #5a5a5a;
			position: absolute;
			top: 0;
			left: 48%;
			transform: rotate(-45deg);
		}
	}
	.panel-tip{
		font-size: 30rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 20rpx 0;
		.tip-content{
			display: flex;
			color: #545454;
			font-size: 30rpx;
			.tip-time{
				font-weight: bold;
				color: #232323;
			}
		}
	}
	.panel-area{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.panel-item{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20rpx 50rpx;
			.slider-label{
				width: 100rpx;
			}
			.slider-count{
				font-size: 25rpx;
				color: #626262;
				margin-left: 20rpx;
			}
		}
	}
	.end-button{
		width: 60%;
		background-color: #4cd964;
		border-radius: 10rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #fff;
		padding: 10rpx 0;
		text-align: center;
		padding: 10rpx 0;
		margin: 20rpx 0;
	}
}

.opreation {
	width: 100%;
	height: 100%;
	position: relative;
	.opreation-button-groups {
		position: absolute;
		right: 50rpx;
		bottom: 50rpx;
		display: flex;

		.opreation-button {
			width: 60rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 5px 0;
			border-radius: 5px;
			margin-left: 20rpx;
			&.finshed {
				border: 1px solid #4cd964;
			}
			&.alloSpeech {
				border: 1px solid $uni-color-main-dark;
			}
		}
	}
}
</style>